import { Card, Form, Table, TableProps, Tabs, TabsProps } from "antd";
import { QueryFilter, Toolbar, useAntdList } from "..";
import { ToolbarProps } from "../Toolbar";
import { FormInstance } from "antd/es/form/Form";
import React from "react";

interface SearchPageTabsProps extends TabsProps {
  defaultTabsActiveKey?: string;
  tabsKey?: string;
}

interface SearchPageProps {
  list?: boolean;
  table: any;
  queryFilter: any;
  tabs?: SearchPageTabsProps;
  toolbar?: ToolbarProps;
  request: any;
  form?:FormInstance
  formatResult?:(res:any)=>any
}
export interface SearchPageInstance{
  refresh:()=>any
}
const SearchPage = React.forwardRef(({
  table,
  request,
  toolbar,
  tabs,
  queryFilter,
}: SearchPageProps,ref) => {
  React.useImperativeHandle<any,SearchPageInstance>(ref,()=>({
      refresh(){
        refresh()
      }
  }))
  const {defaultTabsActiveKey,tabsKey,...restTabs} = tabs||{}
  const { items } = queryFilter;
  const [form] = Form.useForm();
  const { tableProps,refresh, search, tabsProps } = useAntdList(request, {
    defaultTabsActiveKey: defaultTabsActiveKey,
    tabsKey: tabsKey,
    form,
  });
  const { columns } = table;
  return (
    <Card>
      <QueryFilter
        items={items}
        form={form}
        reset={search.reset}
        submit={search.submit}
      />
      {toolbar ? <Toolbar /> : null}
      {tabs ? <Tabs {...tabsProps} items={tabs.items} {...restTabs} /> : null}
      <Table {...tableProps} columns={columns} />
    </Card>
  );
});
const Test = () => {
  return (
    <SearchPage
      table={{
        columns: [{ title: "" }],
      }}
      queryFilter={{ items: [{ label: "qq" }] }}
      request={undefined}
    />
  );
};
export default SearchPage;
